<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<script type="text/javascript">
	$(function() {
		var o = 0;
		$("#addEnclosure")
				.click(
						function() {
							newRow = '<tr>'
									+ '<td><input name="fileName" type="file" style="width: 330px"/></td>'
									+ '<td></td>'
									+ '<td><a href="javascript:" class="deleteRow"><i class="icon-remove"></i></a></td>'
									+ '</tr>';
							$("#tbodys").append(newRow);
						});
	});
</script>

<title>客户信息管理</title>
<meta name="decorator" content="default" />
<link href="${ctxStatic}/jquery-jbox/2.3/Skins/BootStrap/jbox.css"
	type="text/css" rel="stylesheet" />
</head>
<body>

	<div class="container" style="width: 100%;">
		<div style="margin: 20px; border: 1px solid #c8d1d5;">
			<div
				style="padding: 10px; background-color: #f4f4f4; border-bottom: 1px solid #c8d1d5;">
				<h4>
					<i class="icon-globe"></i>${not empty clientele.id?'修改':'添加'}客户
				</h4>
			</div>
			<div>
				<form:form modelAttribute="clientele" action="${ctx}/pro/clientele/"
					method="post">
					<input id="pageNo" name="pageNo" type="hidden"
						value="${page.pageNo}" />
					<input id="pageSize" name="pageSize" type="hidden"
						value="${page.pageSize}" />
					<div style="margin: 17px;">
						<div class="row-fluid"
							style="border: 1px solid #c8d1d5; padding-top: 10px; margin-bottom: 20px; padding-bottom: 20px">
							<div class="row-fluid ">
								<div class="span2" style="margin-left: 10px;">
									<label class="control-label" style="font-size: 14px; margin-bottom: 3px;">客户编号</label>
									<div class="">
										<input type="text" value="${clientele.codeNum }" placeholder="自动生成，可不填"
											class="span12" ondblclick="chooseClientele()"
											id="clienteleNum" disabled="true" /> <input
											value="${clientele.id }" id="clienteleId" type="hidden" />
									</div>
								</div>
								<div class="span2">
									<label class="control-label" style="font-size: 14px; margin-bottom: 3px;">客户名称</label>
									<div class="">
										<input type="text" value="${clientele.name }" class="span12"
											ondblclick="chooseClientele()" id="clienteleName" /> <input
											value="${clientele.id }" id="clienteleId" type="hidden" />
									</div>
								</div>
								<div class="span2">
									<label class="control-label" style="font-size: 14px; margin-bottom: 3px;">客户类型</label>
									<div>
										<form:select path="clienteleTypeCodeNum" id="clienteleTypeId"
											class="span12">
											<form:options items="${fns:getClienteleTypeList()}"
												itemLabel="name" itemValue="codeNum" htmlEscape="false" />
										</form:select>
									</div>
								</div>
								<div class="span2">
									<label class="control-label" style="font-size: 14px; margin-bottom: 3px;">联系电话</label>
									<div>
										<input type="text" value="${clientele.phone }"
											id="clientelePhone" class="span12" />
									</div>
								</div>
							</div>
							<div class="row-fluid ">
								<div class="span2" style="margin-left: 10px;">
									<label class="control-label" style="font-size: 14px; margin-bottom: 3px;">传真</label>
									<div>
										<input type="text" value="${clientele.fax }" id="clienteleFax"
											class="span12" />
									</div>
								</div>
								<div class="span2">
									<label class="control-label" style="font-size: 14px; margin-bottom: 3px;">邮箱</label>
									<div>
										<input type="text" value="${clientele.email }"
											id="clienteleEmail" class="span12" />
									</div>
								</div>
							</div>
						</div>
				</form:form>
				<table id="contentTable" class="table table-hover table-bordered">
					<thead>
						<tr>
							<th>联系人编号</th>
							<th>联系人</th>
							<th>电话</th>
							<th>邮箱</th>
							<th>地址</th>
							<th>备注</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbody">
						<c:forEach items="${list}" var="clienteleAddress">
							<tr>
								<td style="display: none;"><input type="hidden"
									value="${clienteleAddress.id}"></td>
								<td>${clienteleAddress.codeNum}</td>
								<td>${clienteleAddress.name}</td>
								<td>${clienteleAddress.phone}</td>
								<td>${clienteleAddress.email}</td>
								<td>${clienteleAddress.address}</td>
								<td>${clienteleAddress.remarks}</td>
								<td><a href="javascript:" onclick="update(this)"><i
										class="icon-edit"></i></a>&nbsp; <a href="javascript:"
									class="deleteRow"><i class="icon-remove"></i></a></td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
				<div class="form-actions formBtn">
					<button type="button" class="btn btn-primary"
						onclick="addClienteleAddress()">
						<i class="icon-plus"></i>&nbsp;添加地址
					</button>
				</div>

				<sys:message content="${message}" />
				<form id="uploadForm" action="${ctx}/pro/clientele/save"
					method="post" enctype="multipart/form-data" class="form-search"
					onsubmit="loading('正在上传，请稍等...');">
					<table class="table table-hover table-bordered">
						<thead>
							<th>附件名称</th>
							<th>添加时间</th>
							<th>操作</th>
						</thead>
						<tbody id="tbodys">
							<c:forEach items="${enclosureList}" var="info">
								<tr>
									<td>${info.name }</td>
									<td><fmt:formatDate value="${info.createDate }"
											pattern="yyyy-MM-dd HH:mm:ss" /></td>
									<td><a
										href="${ctx}/pro/clientele/downloadEnclosure?id=${info.id}"
										class="downloadEnclosure"> <i class="icon-download"></i></a> <a
										href="${ctx}/pro/clientele/deleteEnclosure?id=${info.id}&foreignKey=${info.foreignKey}"
										onclick="return confirmx('确认要删除该附件吗？', this.href)"> <i
											class="icon-remove"></i></a></td>
								</tr>
							</c:forEach>
						</tbody>
					</table>
					<div class="form-actions formBtn">
						<a class="btn btn-info" href="javascript:void(0)"
							id="addEnclosure"> <i class="icon-upload"></i>&nbsp;添加附件
						</a>
					</div>
					<div>
						<label class="control-label" style="font-size: 14px; margin-bottom: 3px;">备注</label>
						<div>
							<textarea rows="5"class="input-xxlarge" id="clienteleRemarks">${clientele.remarks }</textarea>
						</div>
					</div>
					<div class="form-actions formBtn">
						<button type="button" class="btn btn-primary" onclick="save()">
							<i class="icon-ok"></i>&nbsp;保存
						</button>
						<!-- <button type="button" class="btn btn-primary"
							onclick="history.go(-1)">返 回</button> -->
							<a class="btn btn-primary" href="${ctx}/pro/clientele/list">返 回</a>
					</div>
					<input type="hidden" name="clientele"> <input
						type="hidden" name="clienteleAddress"> <input
						type="hidden" name="ids">
				</form>
			</div>
		</div>

	</div>
	<script type="text/javascript">
		var pageNoOne;
		var pageSizeOne;
		//添加客户地址
		function addClienteleAddress() {
			var html = '<div style="margin-top: 10px;">'
					+ '<label class="control-label" style="width: 130px; text-align: right;">联系人编号：</label>'
					+ '<input type="text" id="clienteleAddressCodeNum" readonly="true" placeholder="自动生成，可不填"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">联系人：</label>'
					+ '<input type="text" id="clienteleAddressName" placeholder="必填"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">电话：</label>'
					+ '<input type="text" id="clienteleAddressPhone" />'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">邮箱：</label>'
					+ '<input type="text" id="clienteleAddressEmail"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">地址：</label>'
					+ '<input type="text" id="clienteleAddressAddress"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">备注：</label>'
					+ '<textarea textarea rows="2" cols="30" id="clienteleRemarks"/>'
					+ '</div>';
			var states = {};
			states.state = {
				content : html,
				buttons : {
					'选择' : true,
					'关闭' : false
				},
				submit : function(v, h, f) {
					if (v == false) {
						return true;
					} else {
						if (h.find("#clienteleAddressName").val() == '') {
							$.jBox.tip("请输入联系人", "warn");
							return false;
						}
						//获取值添加到表格中
						var newRow = '<tr>'
								+ '<td style="display: none;" ><input type="hidden" value=""></td>'
								+ '<td>'
								+ h.find("#clienteleAddressCodeNum").val()
								+ '</td>'
								+ '<td>'
								+ h.find("#clienteleAddressName").val()
								+ '</td>'
								+ '<td>'
								+ h.find("#clienteleAddressPhone").val()
								+ '</td>'
								+ '<td>'
								+ h.find("#clienteleAddressEmail").val()
								+ '</td>'
								+ '<td>'
								+ h.find("#clienteleAddressAddress").val()
								+ '</td>'
								+ '<td>'
								+ h.find("#clienteleRemarks").val()
								+ '</td>'
								+ '<td><a href="javascript:" onclick="update(this)"><i class="icon-edit"></i></a>&nbsp;'
								+ '<a href="javascript:" class="deleteRow"><i class="icon-remove"></i></a></td>'
								+ '</tr>';
						$("#tbody").append(newRow);
						return true;
					}
					return false;
				}
			};
			$.jBox.open(states, '客户地址添加', 500);
		}
		//编辑联系人
		function update(obj) {
			var html = '<div style="margin-top: 10px;">'
					+ '<label class="control-label" style="width: 130px; text-align: right;">联系人编号：</label>'
					+ '<input type="text" id="clienteleAddressCodeNum" readonly="true" value="'
					+ $(obj).parent().parent().children("td:eq(1)").html()
					+ '"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">联系人：</label>'
					+ '<input type="text" id="clienteleAddressName" placeholder="必填" value="'
					+ $(obj).parent().parent().children("td:eq(2)").html()
					+ '"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">电话：</label>'
					+ '<input type="text" id="clienteleAddressPhone" value="'
					+ $(obj).parent().parent().children("td:eq(3)").html()
					+ '"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">邮箱：</label>'
					+ '<input type="text" id="clienteleAddressEmail" value="'
					+ $(obj).parent().parent().children("td:eq(4)").html()
					+ '"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">地址：</label>'
					+ '<input type="text" id="clienteleAddressAddress" value="'
					+ $(obj).parent().parent().children("td:eq(5)").html()
					+ '"/>'
					+ '</div><div>'
					+ '<label class="control-label" style="width: 130px; text-align: right;">备注：</label>'
					+ '<textarea rows="2" cols="30" id="clienteleRemarks">'
					+ $(obj).parent().parent().children("td:eq(6)").html()
					+ '</textarea></div>';
			'</div>';
			var states = {};
			states.state = {
				content : html,
				buttons : {
					'选择' : true,
					'关闭' : false
				},
				submit : function(v, h, f) {
					if (v == false) {
						return true;
					} else {
						//判断是否选择了客户，然后赋值给文本框
						if (h.find("#clienteleAddressName").val() == '') {
							$.jBox.tip("请输入联系人姓名", "warn");
							return false;
						}
						//获取值添加到表格中
						$(obj).parent().parent().children("td:eq(1)").html(
								h.find("#clienteleAddressCodeNum").val());
						$(obj).parent().parent().children("td:eq(2)").html(
								h.find("#clienteleAddressName").val());
						$(obj).parent().parent().children("td:eq(3)").html(
								h.find("#clienteleAddressPhone").val());
						$(obj).parent().parent().children("td:eq(4)").html(
								h.find("#clienteleAddressEmail").val());
						$(obj).parent().parent().children("td:eq(5)").html(
								h.find("#clienteleAddressAddress").val());
						$(obj).parent().parent().children("td:eq(6)").html(
								h.find("#clienteleRemarks").val());
						return true;
					}
					return false;
				}
			};
			$.jBox.open(states, '编辑客户地址', 500);
		}

		var dIds = new Array();//删除了的客户的ID数组
		var i = 0;//数组下标
		//删除
		$(".deleteRow").live("click",function() {
			var obj = $(this);
			var submit = function (v, h, f) {
				if (v == 'ok'){ 
					dIds[i] = $(this).parent().parent().children("td:eq(0)")
							.children("input:eq(0)").val();
					i++;
					$(obj).parent().parent().remove();
				}else if (v == 'cancel'){
					return true;
				}
			};
			$.jBox.confirm("确认删除此信息吗？", "提示", submit); 
	});

		//保存
		function save() {
			var clienteleId = $("#clienteleId").val();//客户ID
			var clienteleName = $("#clienteleName").val();//客户名称
			var clienteleTypeId = $("#clienteleTypeId").val();//客户类型编码
			var clientelePhone = $("#clientelePhone").val();//客户号码
			var clienteleFax = $("#clienteleFax").val();//客户传真
			var clienteleEmail = $("#clienteleEmail").val();//客户邮箱
			var clienteleRemarks = $("#clienteleRemarks").val();//客户备注
			var json = "";	
			if (clienteleName != '') {
				if (clienteleTypeId != '') {
				$.each($("#tbody tr"), function(i, info) {
					var clienteleAddressId = $(
							"#tbody tr:eq(" + i + ") td input:eq(0)").val();//联系人ID
					var clienteleAddressCodeNum = $(
							"#tbody tr:eq(" + i + ") td input:eq(1)").val();//联系人编号
					var clienteleAddressName = $(
							"#tbody tr:eq(" + i + ") td:eq(2)").html();//联系人
					var clienteleAddressPhone = $(
							"#tbody tr:eq(" + i + ") td:eq(3)").html();//电话
					var clienteleAddressEmail = $(
							"#tbody tr:eq(" + i + ") td:eq(4)").html();//邮箱
					var clienteleAddressAddress = $(
							"#tbody tr:eq(" + i + ") td:eq(5)").html();//地址
					var clienteleAddressMarks = $(
							"#tbody tr:eq(" + i + ") td:eq(6)").html();//备注
					if (i != 0) {
						json = json + ','
					}
					json = json + '{"id":"' + clienteleAddressId
							+ '","codeNum":"' + clienteleAddressCodeNum
							+ '","name":"' + clienteleAddressName
							+ '","phone":"' + clienteleAddressPhone
							+ '","email":"' + clienteleAddressEmail
							+ '","address":"' + clienteleAddressAddress
							+ '","marks":"' + clienteleAddressMarks + '"}';
				});
				var clienteleAddressJ = '[' + json + ']';
				var clientele = '{"clienteleId":"' + clienteleId
						+ '","clienteleName":"' + clienteleName
						+ '","clienteleTypeId":"' + clienteleTypeId
						+ '","clientelePhone":"' + clientelePhone
						+ '","clienteleFax":"' + clienteleFax
						+ '","clienteleEmail":"' + clienteleEmail
						+ '","clienteleRemarks":"' + clienteleRemarks + '"}';
				$("input[name=clientele]").val(clientele);
				$("input[name=clienteleAddress]").val(clienteleAddressJ);
				$("input[name=ids]").val(dIds);
				//删除不存在的文件
				$.each($("input[name=fileName]"), function(i, info) {
					if ($(info).val() == null || $(info).val() == '') {
						$(info).parent().parent().remove();
					}
				});
				if (checkfile()) {
					$("#uploadForm").submit();//提交表单
				}
				} else {
					jBox.tip("请选择客户类型！");
				}
				
			} else {
				jBox.tip("请输入客户名称！");
			}
		}

		//验证文件大小 不可超过10M
		function checkfile() {
			var files = document.getElementsByName("fileName");
			var maxsize = 10 * 1024 * 1024;//10M  
			var errMsg = "上传的附件文件不能超过10M！！！";
			for (var i = 0; i < files.length; i++) {
				if (files[i].files[0].size > maxsize) {
					jBox.tip(errMsg);
					return false;
				}
			}
			return true;
		}
	</script>
</body>
</html>